<template>
	<view class="">
	<!-- 	<navigator class="input" url="/pages/search/search">
		    <u-search placeholder="请输入关键词搜索" disabled :show-action="false" bg-color="rgba(0,187,120,0.04)" height="72"></u-search>
		</navigator> -->
		<view class="input">
			<u-search placeholder="请输入关键词搜索" :show-action="true" bg-color=" rgba(255,255,255,0.1)" v-model="searchtext" @custom="customFn"></u-search>
		</view>
		<view class="list-class">
			<block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex">
				<navigator :url="`/pages/user/mygongying?id=${newsItem.id}&userId=${newsItem.user_id}`">
				    <view class="news-card  bg-white1 px-[20rpx] py-[32rpx]">
						<view class="news-card-top">
							<view class="">
								<!-- <image class="tou" src="../../static/images/tuo.png" mode=""></image> -->
								<image class="tou" :src="userInfo.avatar" mode=""></image>
								
							</view>
							<view class="qiyena">
								<view class="qiye">
									{{userInfo.nickname}}
								</view>
								<view class="shenhe" v-if="newsItem.start==0">
									审核中
								</view>
							</view>
							<view class="zhiding1">
								<image class="zhiding" src="../../static/images/zhidng.png" mode="" v-if="newsItem.is_top==0"></image>
							</view>
							
						</view>
				       
					<view class="flex news-card-conter">
						<view class="mr-[20rpx]" v-if="newsItem.fming">
						    <u-image :src="newsItem.fming" width="220" height="200"></u-image>
						</view>
						<view style="width: 65%;">
							<view class="card-titel">{{ newsItem.name }}</view>
							<!-- <view class="gui">
								<view class="gui-item">
									规格：
								</view>
								<view class="huanhang">
									{{newsItem.specifications}}
								</view>
							</view> -->
							<view class="gui">
								<view class="gui-item1">
									库存地：
								</view>
								<view class="huanhang">
									{{newsItem.producer}}
								</view>
							</view>
							<view class="phone">
								<view class="">
									联系方式：
								</view>
								<view class="">
									{{newsItem.contacts[0].tel}}
								</view>
							</view>
						</view>
					</view>
					<view class="news-card-bottom">
						{{newsItem.jjxq}}
					</view>
				    </view>
				</navigator>
			</block>
		</view>
		<view class="" style="height: 40rpx;">
			
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { getArticleCate,getgongyingList,getqiyeDetail } from '@/api/news'
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)
	// onLoad((options) => {
	//     // getData()
	// 	queryList()
	// 	// getqiye()
	// })
	onShow(()=>{
		// console.log('show触发');
		queryList()
	})
	const qiye=ref({})
	// const getqiye=async()=>{
	// 	qiye.value=await getqiyeDetail({
	// 		user_id:dataList.user_id
	// 	})
	// 	// console.log(data);
	// }
	const searchtext=ref('')
	const dataList=ref([])
	const queryList = async () => {
	    try {
	        let data = await getgongyingList()
			data.forEach(item=>{
				item.contacts=JSON.parse(item.contacts)
			})
			dataList.value=data
			qiye.value=await getqiyeDetail({
				user_id:data[0].user_id
			})
	    } catch (e) {
	        console.log('报错=>', e)
	    }
	}
	const customFn=async()=>{
		// console.log('搜索');
		// console.log(searchtext.value,'searchtext');
		try {
		    let data = await getgongyingList({
		      name:searchtext.value
		    })
			// console.log(lists,'lists1111111111111111111');
		    // paging.value.complete(lists)
			dataList.value=data
			dataList.value.forEach(item=>{
				item.contacts=JSON.parse(item.contacts)
			})
			dataList.value.forEach(item=>{
				if(item.contacts.length!=0){
					item.contacts[0].tel=mobile(item.contacts[0].tel)
				}
				// item.contacts[0].tel=mobile(item.contacts[0].tel)
				// console.log(item);
			})
			
		} catch (e) {
		    console.log('报错=>', e)
		}
	}
</script>

<style lang="scss" scoped>
	.gui-item1{
		width:23%;
	}
	.gui-item{
		width: 17%;
	}
	.huanhang{
		flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.input{
		// position: absolute;
		// top: 204rpx;
		margin-top: 28rpx;
		margin-bottom: 28rpx;
		width: 94%;
		margin-left: 3%;
		background-color: rgba(0,187,120,0.04);
	// height: 72rpx;
	border: 3rpx solid #06BE7C;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.list-class{
		width: 94%;
		margin-left: 3%;
	}
	.news {
		position: relative;
		.jia{
			width: 98rpx;
			height: 98rpx;
			position: fixed;
			bottom: 292rpx;
			right: 18rpx;
			z-index: 2;
		}
	    &-search {
	        margin-bottom: 2rpx;
	    }
	
	    &-list {
	        height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
	    }
	}

	.list-class{
		width: 94%;
		margin-left: 3%;
		margin-top: 28rpx;
	}
	.news-card {
	    // border-bottom: 1px solid #f8f8f8;
		margin-bottom: 20rpx;
		
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	    &-content {
	        &-title {
	            -webkit-line-clamp: 2;
	            overflow: hidden;
	            word-break: break-all;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-box-orient: vertical;
	        }
	        &-intro {
	            -webkit-line-clamp: 1;
	            overflow: hidden;
	            word-break: break-all;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-box-orient: vertical;
	        }
	    }
	}
	.card-titel{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.gui{
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #777777;
		margin-top: 22rpx;
	}
	.phone{
		margin-top: 22rpx;
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.bg-white1{
		background-color: #fff;
	}
	.news-card-top{
		display: flex;
		height: 56rpx;
		line-height: 56rpx;
		padding-bottom: 16rpx;
		box-sizing: content-box;
		border-bottom: 2rpx solid #EEE;
		position: relative;
		.qiyena{
			margin-left: 10rpx;
			display: flex;
			flex: 1;
			// justify-content: space-between;
			.qiye{
				width: 70%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.shenhe{
				width: 30%;
				text-align: right;
				color: #cc463d;
				
			}
		}
		.tou{
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}
		.zhiding1{
			position: absolute;
			right: -18rpx;
			bottom:0;
			.zhiding{
				width: 134rpx;
				height: 52rpx;
			}
		}
		
	}
	.news-card-conter{
		margin-top: 16rpx;
	}
	.news-card-bottom{
		margin-top: 16rpx;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 36rpx;
		padding: 20rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 2;
		/*显示文本行数*/
		overflow: hidden;
		/*溢出隐藏*/
		height: 97rpx;
	}
</style>